/* eslint-disable eqeqeq */
import Limit from '@/components/Limit';
import { Avatar, Popconfirm, Tooltip } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useRef, useState } from 'react';
import { difftime } from '@/utils/time';

const ReplyChildCard = ({
  userName,
  bereplyUserName,
  atUserList,
  token,
  reply,
  createTime,
}) => {
  const intoRef = useRef();

  return (
    <div
      style={{
        overflow: 'hidden',
        display: 'flex',
        transition: 'all 0.2s',
        cursor: "pointer",
      }}
      ref={intoRef}
    >
      <div style={{ flex: 1 }}>
        <div className="spread" style={{ height: 40, marginBottom: 0 }}>
          <div className="center">
            <b>{createTime}</b>
            <b style={{ color: token.colorPrimary, textIndent: 6 }}>{userName}</b>
            <span style={{ color: '#333333', textIndent: 6 }}>
              回复 &nbsp;
            </span>
            <b style={{ color: token.colorPrimary }}>{bereplyUserName}</b>
          </div>
        </div>
        <div
        >
          <Limit content={reply}></Limit>
          {
            atUserList && atUserList?.length > 0 && <div className="spread" style={{ color: '#666', fontSize: 12, paddingTop: 12 }}>
              <span>
                <b>
                  @
                </b>
                {atUserList?.map?.((it) => (
                  <span key={it?.name} style={{ padding: '0 4px' }}>
                    {it?.name}
                  </span>
                ))}
              </span>
            </div>
          }
        </div>
      </div>
    </div>
  );
};

export default ReplyChildCard;
